<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
  <script src="vue.js"></script>
</head>
<!--1.VUE中常见的按键别名:
      回车==>enter
      删除==>delete(捕获删除和退格按键)
      退出==>esc
      空格==>space
      换行==>tab,适合keydown
      上==>up
      下==>down
      左==>left
      右==>right
    2.Vue未提供的别名的案件，可以使用编码key值去绑定，但注意转为kebab-case:大写caps-lock

    3.系统修饰键（特殊）：ctrl，alt，shift，meta
        1.配合keyup使用：按下按键同时，再按其他建，随后释放其他键，时间才被触发
        2.配合keydown使用，正常触发事件
    也可以组合使用xxx.ctrl.y




-->
<body>
<div id='root'>
  <h2 >welcome to {{address}}</h2>
  <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
</div>
</body>
<script  type="text/javascript">
  Vue.config.productionTip = false;
  Vue.config.keyCodes.huiche = 13;
  const vm = new Vue({
    el:'#root',
    data:{
      name:'王凯',
      address:'铁建广场'
    },
    methods:{
      showInfo(e){
        console.log(e.target.value)
        console.log(e.key)
        console.log(e.keyCode)
      }
    }
  })

</script>
</html>